<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局</title>
    <!--概念:  网页布局是指网页内容在页面上所处位置的设计；宗旨是从整体到局部进行布局。
    可以利用div（布局标签）+css（布局设置）进行布局，div相当于一个容器，可以把网页分割成独立、不同的部分，我们可以通过id或class属性区分不同的
容器，从而利用css对不同的容器做出不同的样式设置。
    弹性布局  流元素流是浏览器上摆放HTML元素的方法 ；浏览器会从HTML文件的最上面到最下面沿着元素流显示各个元素，块元素从上向下流，行内元素从左
上到右下流。
    弹性布局的概念    弹性盒模型决定了盒子在其他盒子中的分布方式和对可用空间的处理方式。
    Flex 容器指定为 Flex 布局的元素，称为 Flex 容器，简称“容器” ；此时，其子元素会自动成为flex项目；容器默认存在水平的主轴和垂直的交叉轴。
弹性布局相关属性
1. display：当值为 flex 时，会将当前元素设置为flex容器。
2. flex-direction：设置容器的主轴方向，其值有 row（主轴为水平方向且起点在左端） 、 rowreverse（主轴为水平方向且起点在右端） 、 column（主轴为垂直方向且起点在上沿） 、 columnreverse（主轴为垂直方向且起点在下沿） ；请注意，当你设置完主轴的方向后，另一方向自动成为
交叉轴。
3. flex-wrap：规定 flex 容器是单行或者多行，同时主轴的方向决定了新行（平行于主轴的行）堆叠
的方向。 ；属性值有 nowrap（默认值，规定灵活的项目不拆行或不拆列，即容器是单行） 、 wrap（规
定灵活的项目在必要的时候拆行或拆列，即容器是多行） 、 wrap-reverse（容器是多行且规定项目在必要
的时候以相反的顺序拆行或拆列） 。
-->
    <style>
        .myContainer{display:flex;
            flex-direction:unset;
            flex-wrap: wrap;
        background-color:rgb(22, 145, 104);
        width:800px;
        height:800px}
        .myItem{width: 150px;
        height:150px;
        margin:30px;
        background:no-repeat url(./photo/jjy0.2spost.jpg);}
    </style>
</head>
<body>
   
    <div class="myContainer">
        <div class="myItem">
            <a href="#">kiku's eye</a>
        </div>
        <div class="myItem">
            <a href="#">kiku's eye</a>
        </div>
        <div class="myItem">
            <a href="#">kiku's eye</a>
        </div>
        <div class="myItem">
            <a href="#">kiku's eye</a>
        </div>
        <div class="myItem">
            <a href="#">kiku's eye</a>
        </div>
        <div class="myItem">
            <a href="#">kiku's eye</a>
        </div>
    </div>
</body>
</html>